<template>
  <yd-layout>
    <v-header slot="navbar" title="我的试用">
      <router-link to="/" slot ="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
    </v-header>
    <yd-tab v-model="activeIndex">
      <yd-tab-panel :label = "item.title" v-for="(item, index) in tabLi" :key="index" class = "mytrial">
        <div class="comm" v-for = "(item, index) in commLi" :key = "index">
          <div class="comm_title">
            <div class="fl">申请时间： {{ item.createTime }}</div>
            <div class="fr">{{ item.state | trialState }}</div>
          </div>
          <div class="flex middle comm_con">
            <box :bgImg = 'item.imgSrc' class = "comm_logo"></box>
            <div class="title">{{ item.title }}</div>
          </div>
          <div class="comm_title">
            <div class="fl">{{ item.status | trialStatus }}</div>
            <div class="fr" v-if = "activeIndex !== 2">剩余{{ item.endTime }}</div>
            <div class="fr" v-if = "activeIndex === 2">
              <yd-button>订单详情</yd-button>
              <yd-button v-if = 'item.status === "0"'>立即下单</yd-button>
              <yd-button v-if = 'item.status === "2"' @click.native = "push('/trialreport')">提交试用报告</yd-button>
              <yd-button v-if = 'item.status === "3"'>查看试用报告</yd-button>
            </div>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </yd-layout>
</template>
<script>
export default {
  name: 'mytrial',
  data () {
    return {
      activeIndex: 0,
      tabLi: [],
      commLi: []
    }
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  methods: {
    init (val) {
      this.tabLi = [{
        title: '全部试用'
      }, {
        title: '申请中'
      }, {
        title: '申请成功'
      }, {
        title: '申请失败'
      }]
      this.commLi = [{
        createTime: '2018-12-12   20:28:36',
        endTime: '4天3小时23分',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        state: '0',
        status: '0'
      }, {
        createTime: '2018-12-12   20:28:36',
        endTime: '4天3小时23分',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        state: '0',
        status: '2'
      }, {
        createTime: '2018-12-12   20:28:36',
        endTime: '4天3小时23分',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        state: '1',
        status: '3'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .mytrial{
    padding: $padding;
    box-sizing: border-box;
    .comm{
      background-color: #fff;
      margin-bottom: .1rem;
      &:last-child{
        margin-bottom: 0;
      }
      .comm_title{
        padding: $mini-padding;
        &:first-of-type{
          border-bottom: 1px solid #ddd;
        }
        &:last-of-type{
          border-top: 1px solid #ddd;
        }
        &:after{
          content: '';
          display: block;
          clear: both;
        }
      }
      .comm_con{
        padding: $mini-padding;
        .comm_logo{
          width: 1.14rem;
          margin-right: .4rem;
      }
      }
    }

  }
</style>
